import React, { useState } from 'react';
import { Input, Button, List, Checkbox, Card, Typography } from 'antd';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import './index.less';

const { Title } = Typography;

interface TodoItem {
  id: number;
  text: string;
  completed: boolean;
}

const TodoApp: React.FC = () => {
  const [todos, setTodos] = useState<TodoItem[]>([]);
  const [inputValue, setInputValue] = useState('');

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      const newTodo: TodoItem = {
        id: Date.now(),
        text: inputValue.trim(),
        completed: false,
      };
      setTodos([...todos, newTodo]);
      setInputValue('');
    }
  };

  const handleToggleTodo = (id: number) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const handleDeleteTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div className="todo-app">
      <Card className="todo-card">
        <Title level={4}>待办事项</Title>
        <div className="todo-input">
          <Input
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            placeholder="请输入待办事项"
            onPressEnter={handleAddTodo}
            data-testid="todo-input"
          />
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={handleAddTodo}
            data-testid="add-button"
          >
            添加
          </Button>
        </div>
        <List
          className="todo-list"
          dataSource={todos}
          renderItem={(todo) => (
            <List.Item
              className={`todo-item ${todo.completed ? 'completed' : ''}`}
              data-testid={`todo-item-${todo.id}`}
            >
              <Checkbox
                checked={todo.completed}
                onChange={() => handleToggleTodo(todo.id)}
                data-testid={`checkbox-${todo.id}`}
              />
              <span className="todo-text">{todo.text}</span>
              <Button
                type="text"
                danger
                icon={<DeleteOutlined />}
                onClick={() => handleDeleteTodo(todo.id)}
                data-testid={`delete-button-${todo.id}`}
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
};

export default TodoApp; 